@import "header.html"
<link rel="stylesheet" href="../css/indent.css">
<body>
<header class="fxj-header">
    <h1 class="fxj-title">订单</h1>
</header>

<main id="main">
    <div class="tab-bar">
        <span :class="{active:!view.end}" @click="toggleEnd(false)">进行中</span>
        <span :class="{active:view.end}" @click="toggleEnd(true)">已结束</span>
    </div>

    <div class="tabs">
        <div id="underway" v-show="!view.end" v-cloak>
            <ul class="indent-group">
                <li class="indent-item" v-for="indent of data.going">
                    <div class="indent-title" @click="goPage('house_res_detail.html?id='+indent.house_id)">
                        <span class="title" v-cloak>{{indent.title}}</span>
                        <span class="highlight" v-cloak>{{indent.status.value}}</span>
                    </div>
                    <i class="tieku"></i>
                    <div class="indent-info" @click="checkIndentDetail(indent.oid)">
                        <img :src="indent.img" alt="">
                        <div>
                            <span v-cloak>{{indent.start_date.slice(0,-3)}}至{{indent.end_date.slice(0,-3)}}</span>
                            <span v-cloak>整套出租 - 入住{{indent.guest_count}}人</span>
                            <span v-cloak>订单总额：<span class="highlight">￥{{indent.pay_price}}</span></span>
                        </div>
                        <svg class="icon">
                            <use xlink:href="#icon-you"></use>
                        </svg>
                    </div>
                    <i class="tieku"></i>
                    <div class="btn-group">
                        <span v-if="indent.status.status===4" v-cloak @click="earlyLeave(indent.oid)">提前退房</span>
                        <span v-if="indent.status.status!==4||indent.notcancel==='1'" @click="cancelIndent(indent.oid)">取消订单</span>
                        <span @click="contactTheLandlord(indent)">联系房东</span>
                        <span v-cloak v-if="indent.status.status===2||indent.status.status===22" class="highlight"
                              @click="nowPay(indent)">立即付款</span>
                    </div>
                </li>
            </ul>
        </div>

        <div id="end" v-show="view.end" v-cloak>
            <ul class="indent-group">
                <li class="indent-item" v-for="indent of data.end">
                    <div class="indent-title" @click="goPage('house_res_detail.html?id='+indent.house_id)">
                        <span class="title" v-cloak>{{indent.title}}</span>
                        <span class="highlight" v-cloak>{{indent.status.value}}</span>
                    </div>
                    <i class="tieku"></i>
                    <div class="indent-info" @click="checkIndentDetail(indent.oid)">
                        <img :src="indent.img" alt="">
                        <div>
                            <span v-cloak>{{indent.start_date.slice(0,-3)}}至{{indent.end_date.slice(0,-3)}}</span>
                            <span v-cloak>整套出租 - 入住{{indent.guest_count}}人</span>
                            <span v-cloak>订单总额：<span class="highlight">￥{{indent.pay_price}}</span></span>
                        </div>
                        <svg class="icon">
                            <use xlink:href="#icon-you"></use>
                        </svg>
                    </div>
                    <i class="tieku"></i>
                    <div class="btn-group">
                        <!--<span @click="delIndent(indent.oid)" v-if="indent.status.status===0">删除订单</span>-->
                        <span v-cloak class="highlight" v-if="indent.status.status===5||indent.status.status===7"
                              @click="goPage('comment.html',{
                            data:{
                                id:indent.oid
                            }
                        })">立即点评</span>
                        <span v-cloak class="highlight"
                              v-if="indent.status.status===6||indent.status.status===7||indent.status.status===8"
                              @click="goPage('comment_detail.html',{
                            data:{
                                id:indent.oid,
                                type:'2'
                            }
                        })">查看点评</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="loadMore"></div>
</main>

@import "js.html"
<script src="../script/indent.js"></script>
</body>
@import "footer.html"
